<template>
  <div style="width: 100%">
    <div style="width: 100%">
      <div id="lianheqs" style="width: 100%; height: 200px; top: -15px"></div>
    </div>
  </div>
</template>
  
<script>
import { showYear } from '@/utils/index.js'
export default {
  components: {},
  props: {
    data: [],
    grid: {
      default: () => {
        return {
          top: "25%",
          left: "10%",
          right: "5%",
          bottom: "15%",
        };
      },
    },
  },
  data() {
    return {
      dataArr : [],
    };
  },
  watch: {},
  computed: {},
  methods: {
    init() {
      let xdata = [];
      let dataval = [];

      // this.data.forEach((item) => {
      //   xdata.push(item.yearMonth);
      //   dataval.push(
      //     item.outflowCigarSaleCigarRatio == "-"
      //       ? 0
      //       : parseFloat(item.outflowCigarSaleCigarRatio * 100)
      //   );
      // });
      xdata=this.dataArr
      this.dataArr.forEach(time=>{
       let k= this.data.find(it=>it.yearMonth==time)
       console.log(k);
       if(k&&k.outflowCigarSaleCigarRatio){
        dataval.push(k.outflowCigarSaleCigarRatio == "-"? 0: parseFloat(k.outflowCigarSaleCigarRatio * 100).toFixed(4));
       }else{
        dataval.push(0);
       }
      })

      let min = this.data.sort(
        (a, b) => a.outflowCigarSaleCigarRatio - b.outflowCigarSaleCigarRatio
      )[0];
      let max = this.data.sort(
        (a, b) => a.outflowCigarSaleCigarRatio - b.outflowCigarSaleCigarRatio
      )[this.data.length - 1];
      console.log(min, "min");
      console.log(max, "max");

      let mychart = this.$echarts.init(document.getElementById("lianheqs"));
      let option = {
        tooltip: {
          trigger: "axis",
          axisPointer: {
            lineStyle: {
              color: {
                type: "linear",
                x: 0,
                y: 0,
                x2: 0,
                y2: 1,
                colorStops: [
                  {
                    offset: 0,
                    color: "rgba(0, 255, 233,0)",
                  },
                  {
                    offset: 0.5,
                    color: "rgba(255, 255, 255,1)",
                  },
                  {
                    offset: 1,
                    color: "rgba(0, 255, 233,0)",
                  },
                ],
                global: false,
              },
            },
          },
        },
        grid: this.grid,
        xAxis: [
          {
            type: "category",
            boundaryGap: false,
            axisLine: {
              lineStyle: {
                color: "white",
              },
            },
            axisLabel: {
              // interval: 0,
              // rotate: 40,
              textStyle: {
                fontFamily: "Microsoft YaHei",
              },
            },
            splitLine: {
              show: true,
              lineStyle: {
                color: "rgba(255,255,255,0.3)",
              },
            },
            data: xdata,
          },
        ],

        yAxis: [
          {
            name: "‱",
            type: "value",
            boundaryGap: false,
            // max:max,
            // min:min,
            // 表示min-max中间的值分成几等份
            // splitNumber: 5,
            axisLine: {
              show: false,
              lineStyle: {
                color: "white",
              },
            },
            splitLine: {
              show: true,
              lineStyle: {
                color: "rgba(255,255,255,0.3)",
              },
            },
            axisLabel: {
              show: true,
              margin: 10,
              textStyle: {
                color: "#fff",
              },
              formatter: function (value, index) {
                return value.toFixed(3);
              },
            },
            axisTick: {
              show: false,
            },
            // data:['0','0.005','0.010','0.015','0.020','0.025','0.030',]
          },
        ],
        series: [
          {
            name: "",
            type: "line",
            showAllSymbol: true,
            symbol: "circle",
            symbolSize: 10,
            lineStyle: {
              normal: {
                color: "#2CABE3",
              },
            },
            label: {
              show: false,
              position: "top",
              textStyle: {
                color: "#2CABE3",
              },
            },
            itemStyle: {
              color: "#fff",
              borderColor: "#2CABE3",
              borderWidth: 2,
            },
            areaStyle: {
              normal: {
                color: new this.$echarts.graphic.LinearGradient(
                  0,
                  0,
                  0,
                  1,
                  [
                    {
                      offset: 0,
                      color: "rgba(81,150,164,0.3)",
                    },
                    {
                      offset: 1,
                      color: "rgba(81,150,164,0)",
                    },
                  ],
                  false
                ),
              },
            },
            data: dataval,
          },
        ],
      };

      mychart.setOption(option);
    },
  },
  created() {
    this.dataArr=showYear()
  },
  mounted() {
    this.init();
  },
};
</script>
<style lang="scss" scoped></style>